<template>
	<view>
		<view class="select_title u-padding-20" @click="show = true">
			<input v-model="time" disabled class="dis_inl_blo va_m u-margin-right-20" type="text" placeholder="请选择时间段">
		</view>
		
		<u-calendar v-model="show" :mode="mode" @change="change">
			<view slot="tooltip">
				<view class="top_title">
					请选择开始/结束时间
				</view>
			</view>
		</u-calendar>
		<u-empty :show="showEmpty" text="暂无数据" mode="list">
		</u-empty>
		<view class="uni-flex-center" v-for="(item, index) in visitList">
			<view class="main-service uni-cell-90" style="padding-bottom: 10rpx; width: 96%; margin-left: 2%;">
				<view class="user-list">
					<view class="title u-rela">
						<view class="u-abso pos_left">
							<text>访客通行</text>
						</view>
						<view class="u-abso pos_right" v-if="item.status==0">
							<text style="color:#007AFF;">{{item.status_label}}</text>
						</view>
						<view class="u-abso pos_right" v-if="item.status==1">
							<text style="color:#18B566;">{{item.status_label}}</text>
						</view>
						<view class="u-abso pos_right" v-if="item.status==-1">
							<text style="color:#ff5500;">{{item.status_label}}</text>
						</view>
					</view>
					<!-- <u-line></u-line> -->
					<view class="u-padding-20">
						<view class="d_view u-margin-bottom-20">
							<text class="l_title">到访人称呼：{{item.name}}</text>
							<text class="d_content">{{item.tel}}</text>
							
						</view>
						<view class="d_view u-margin-bottom-20">
							<text class="l_title">到访人数</text>
							<text class="d_content">{{item.person}}</text>
						</view>
						<view class="d_view">
							<text class="l_title">到访时间</text>
							<text class="d_content">{{item.time}}</text>
						</view>
					</view>
					<view class="u-padding-15 u-border-top u-text-right">
						<u-button class="u-margin-right-20" type="primary" shape="circle" size="mini" @click="visitorsDetail(item.id)">查看详情</u-button>
					</view>
					<view style="clear: both;"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMyVisit,
		searchVisit
	} from "@/service/pastService.js";
	export default {
		data () {
			return {
				visitList: [],
				showEmpty: false,
				
				show: false,
				mode: 'range',
				time:'',
				startDate:'',
				endDate:''
			}
		},
		onLoad() {
			this.dateFormat();
			// console.log(this.dateFormat());
			getMyVisit({
				start:this.startDate,
				end:this.endDate
			}).then(this.getMyVisit);
		},
		methods:{
			getMyVisit(e) {
				// console.log(e);
				if (e.code == 200) {
					this.showEmpty = false;
					this.visitList = e.result;
				} else if(e.code == 400) {
					this.showEmpty = true;
					this.visitList = [];
				}
			},
			visitorsDetail:function(id){
				uni.navigateTo({
					url:'../index/visitorsDetail?id='+id
				})
			},
			change(e) {
				// console.log(e);
				this.time=e.startDate+'-'+e.endDate;
				this.startDate=e.startDate+' '+'00:00:00';
				this.endDate=e.endDate+' '+'24:00:00';;
				getMyVisit({
					start:e.startDate+' '+'00:00:00',
					end:e.endDate+' '+'24:00:00'
				}).then(this.getMyVisit)
			},
			dateFormat() {
				let date = new Date(new Date().toISOString());
				let year = date.getFullYear();
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				this.startDate= year + "-" + month + "-" + day + " " +  "00:00:00" ;
				this.endDate= year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
			}
		}
	}
</script>

<style lang="scss">
	.u-empty.data-v-3d842a77 {
		margin-top:150rpx !important;
	}
	.select_title{
	
		background-color: #0c838b;
	}
	.select_title input{
		width:97%;
		height:50rpx;
		padding:0 10rpx;
		font-size: 26rpx;
		text-align: center;
		border-radius: 10rpx;
		background-color: #fff;
	}
	.top_title{
		color: $u-type-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}
	.l_title {
		color: #999;
		float: left;
	}
	
	.d_content {
		color: #666;
	}
	
	.d_view {
		font-size: 28rpx;
		color: #999;
		/* margin-top: 30rpx; */
		text-align: right;
	}
	.main-service {
		margin-top: 20upx;
		border-radius: 10upx;
		background: #ffffff;
		box-shadow: 5rpx 5rpx 20rpx rgba(0, 0, 0, 0.15);
	}
	
	.main-service .title {
		height:70rpx;
		line-height: 70rpx;
		font-size: 30rpx;
	}
</style>
